import React,{ useState } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  FlatList,
  View,
} from 'react-native';
import {Avatar,Icon,ListItem} from 'react-native-elements'
var getdata = function(set)
  {
    // fetch("http://192.168.1.106:3000/records")
    // .then((response) => response.json())
    // .then((responseData) => {
    //     console.log(responseData)
    //     // set(responseData)
    // })
    // .catch((error) => {
    //     console.error(error)
    // });
    fetch("https://api.github.com/users")
    .then((response) => response.json())
    .then((responseData) => {
        console.log(responseData.length)
        set(responseData)
    })
    .catch((error) => {
        console.error(error)
    });
}

var getfollowing = function(login,setdet,mod,setmod){
  fetch("https://api.github.com/users/"+login+"/following")
  .then((response) => response.json())
  .then((responseData) => {
      console.log(responseData.length)
      setdet(responseData)
      setmod(mod);
      // console.log(DATA)
      // console.log('responseData= ' + JSON.stringify(responseData));
  })
  .catch((error) => {
      console.error(error)
  });
}

export default Records = () => {
    var accordExpand = new Array(50)
    accordExpand.fill(false)
    const [data,setData] = useState([]);
    const [modal, setModal] = useState(accordExpand);
    const [detail,setDetail] = useState([]);
    const [selectedId, setSelectedId] = useState(8);
    React.useEffect(() => {   
      getdata(setData)
    },[])
    return (
      <View style={{flex:1}}>
        {/* <Button style={{marginLeft:21}}
        onPress={()=>{getdata(setData);}}
        title="getdata"/> */}
        <FlatList
          data = {data}
          extraData={selectedId}
          keyExtractor={(item) => item.id}
          initialNumToRender={5}
          renderItem={({item}) => (
          <ListItem.Accordion
              content={
                <>
                <Avatar source={{uri: item.avatar_url}} containerStyle={{marginRight:21}}/>
                <ListItem.Content>
                <ListItem.Title>{item.login}</ListItem.Title>
                <ListItem.Subtitle>{item.id}</ListItem.Subtitle>
                </ListItem.Content>
                </>
              }
              containerStyle={{height:70}}//backgroundColor:selectedId===item.id?'skyblue':''
              isExpanded={modal[item.id]}
              onPress={() => {
                var t = {...modal};t[item.id]=!t[item.id];
                if(selectedId!=item.id){
                getfollowing(item.login,setDetail,t,setModal);setSelectedId(item.id)}
                else setModal(t) 
              }}
            >{detail.map((item,i) => (
                <ListItem key={i} bottomDivider containerStyle={{marginLeft:30,height:60,backgroundColor:'#FF9800'}}>
                <Avatar source={{uri: item.avatar_url}} avatarStyle={{borderRadius:27}}/>
                <ListItem.Content>
                  <ListItem.Title>{item.login}</ListItem.Title>
                </ListItem.Content>
                <Text>{item.node_id}</Text>
                </ListItem>
              ))}
          </ListItem.Accordion>
          )}/>   
      </View>
    );
};
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    flex: {
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 10,
        width:360,
    },
    title: {
      fontSize: 18,
    },
  });
